<!-- 扩展名 -->
<template>
  <div class="suffix-file-name-form">
    <el-form :model="formStore">
      <el-form-item>
        <el-checkbox v-model="formStore.suffixNameEnable" label="扩展名" />
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group
          v-model="formStore.suffixNameType"
          :disabled="enableSuffixName"
        >
          <el-radio value="0">自定义</el-radio>
          <el-radio value="1">替换</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <div class="sub">
          <el-icon class="icon"><Paperclip /></el-icon>
          <div class="sub-item">
            <template v-if="formStore.suffixNameType === '0'">
              <el-form-item label="新扩展名">
                <el-input
                  v-model="formStore.newSuffixName"
                  :disabled="enableSuffixName"
                  size="small"
                  placeholder="请输入新扩展名"
                />
              </el-form-item>
            </template>
            <template v-if="formStore.suffixNameType === '1'">
              <el-form-item label="查找内容">
                <el-input
                  v-model="formStore.suffixNameSearch"
                  :disabled="enableSuffixName"
                  size="small"
                  placeholder="请输入查找内容"
                />
              </el-form-item>
              <el-form-item label="替换内容">
                <el-input
                  v-model="formStore.suffixNameReplace"
                  :disabled="enableSuffixName"
                  size="small"
                  placeholder="请输入替换内容"
                />
              </el-form-item>
            </template>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { Paperclip } from '@element-plus/icons-vue'
import useSuffixFileNameFormStore from '@renderer/store/Form/SuffixFileNameFormStore'
import { computed } from 'vue'

const formStore = useSuffixFileNameFormStore()

// 启用扩展名
const enableSuffixName = computed(() => !formStore.suffixNameEnable)
</script>

<style lang="less" scoped>
.el-form-item {
  margin-bottom: 14px;
}

.suffix-file-name-form {
  .sub {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding-left: 10px;

    .icon {
      position: relative;
      top: 8px;
      font-size: 16px;
      margin-right: 12px;
    }

    .sub-item {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .el-form-item {
      margin-bottom: 6px;
    }
  }
}
</style>
